<template>
  <view class="container">
    <!-- 动态列表 -->
    <view class="itme" @click.stop="godetail(item.id)" :key="index" v-for="(item, index) in list">
      <view class="header">
        <image :src="img_url + item.avatar" style="width: 88rpx; height: 88rpx; border-radius: 50%" mode=""></image>
        <view style="padding-left: 16rpx">
          <view class="topright">
            <text style="font-weight: 500; font-size: 32rpx; color: #151515; padding-right: 12rpx">{{ item.nickname }}</text>
            <image
              style="width: 28rpx; height: 28rpx; vertical-align: middle"
              :src="item.gender == 1 ? '../../static/dynamicimg/boy.png' : '../../static/dynamicimg/gril.png'"
              mode=""
            ></image>
          </view>
          <view style="font-weight: 400; font-size: 24rpx; color: #666666">{{ item.dynamictiem + ' ' + item.address }}</view>
        </view>
      </view>
      <view
        style="
          font-weight: 500;
          font-size: 28rpx;
          color: #151515;
          width: 670rpx;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          margin-top: 24rpx;
        "
      >
        {{ item.content }}
      </view>
      <!-- 图片视频 -->
      <view style="margin-top: 20rpx">
        <firstimg :list="item.images"></firstimg>
      </view>
      <!-- 点赞、评论 -->
      <view style="display: flex; justify-content: flex-end">
        <view style="display: flex; align-items: center">
          <view @click.stop="changelike(item)">
            <image
              :src="item.is_like == 0 ? '../../static/dynamicimg/like.png' : '../../static/dynamicimg/likeact.png'"
              style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx"
              mode=""
            ></image>
            <text>{{ item.like_num }}</text>
          </view>
          <view style="margin-left: 40rpx">
            <image src="../../static/dynamicimg/pinglun.png" style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx" mode=""></image>
            <text>{{ item.comment_num }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      list: [],
      userid: '',
      page: 1,
      img_url: this.img_url
    };
  },
  onLoad(opt) {
    if (opt.userid) {
      this.userid = opt.userid;
    }
  },
  async onReachBottom() {
    console.log('触底了');
    this.page++;
    const res = await this.http('/dynamic/mydynamic', {
      page: this.page,
      user_id: this.userid
    });

    if (res.data.data.length != 0) {
      res.data.data.forEach((item) => {
        item.dynamictiem = dayjs(item.createtime * 1000).format('YYYY-MM-DD');
      });
      this.list.push(...res.data.data);
    } else {
      uni.showToast({
        title: '数据加载完毕',
        icon: 'none'
      });
    }
  },
  onShow() {
    this.page = 1;
    this.list = [];
    this.getotherdynamic();
  },
  methods: {
    // 动态详情
    godetail(id) {
      console.log(11111);
      uni.navigateTo({
        url: '/dynamic/dynamicdetail/dynamicdetail?id=' + id
      });
    },
    // 点赞
    async changelike(item) {
      // console.log(item);
      // return;
      item.is_like = !item.is_like;
      console.log(item.is_like);
      if (item.is_like) {
        item.like_num++;
      } else {
        item.like_num--;
      }
      await this.http('/dynamic/operate', {
        dynamic_id: item.id
      });
      this.getotherdynamic();
    },
    // 获取他人动态
    async getotherdynamic() {
      const res = await this.http('/dynamic/hedynamic', {
        page: this.page,
        to_user_id: this.userid
      });

      this.list = res.data.data.filter((item) => {
        return item.status == 2;
      });
      this.list.forEach((item) => {
        item.dynamictiem = dayjs(item.createtime * 1000).format('YYYY-MM-DD');
      });
      console.log('他人动态', this.list);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 0 20rpx;
  .itme {
    width: 690rpx;
    border-bottom: 2rpx solid #e8e8e8;
    padding-bottom: 34rpx;
    .header {
      display: flex;
      .topright {
      }
    }
  }
}
</style>
